import React, { useState } from "react";
import { HotWarmCold } from "@ct0/ui";

export default HotWamColdPanel;

function HotWamColdPanel() {
  const [value, setValue] = useState({
    hot: 0,
    warm: 0,
    cold: 0,
  });
  return (
    <div>
      <h2>HotWarmCold 热、温、冷数据</h2>
      <br />
      HotWarmCold 是一个输入类型组件，用来设置 热、温、冷
      的数据周期，主要是给大数据设置数据存储周期
      <br />
      <br />
      <div style={{ width: "80%" }}>
        <HotWarmCold value={value} onChange={setValue} />
      </div>
      <br />
      <div style={{ width: "80%" }}>
        <HotWarmCold disabled value={value} />
      </div>
      <API />
    </div>
  );
}

function API() {
  return (
    <>
      <h2>API</h2>
      <table border="1" cellPadding="5">
        <thead>
          <tr>
            <th>参数</th>
            <th>必填</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>value</td>
            <td></td>
            <td>数据</td>
            <td> hot: number, warm: number, cold: number </td>
            <td></td>
          </tr>
          <tr>
            <td>disabled</td>
            <td></td>
            <td>禁用状态</td>
            <td>boolean</td>
            <td>false</td>
          </tr>
          <tr>
            <td>onChange</td>
            <td></td>
            <td>事件回调, 用户修改滑动条时触发</td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </>
  );
}
